import React, { createElement, forwardRef } from 'react';
import './index.scss';

export interface StatusIndicatorItem {
  /**
   * 指示器颜色
   */
  indicatorColor: string;
  /**
   * 标题文字
   */
  title: string;
  /**
   * 数值
   */
  value: string;
  /**
   * 单位
   */
  unit?: string;
}

export interface StatusIndicatorProps {
  /**
   * 组件整体宽度
   */
  width?: string | number;

  /**
   * 组件整体高度
   */
  height?: string | number;

  /**
   * 背景图片路径
   */
  backgroundImage?: string;

  /**
   * 指示器列表
   */
  indicators?: StatusIndicatorItem[];

  /**
   * 指示器配置
   */
  indicator?: {
    /**
     * 指示器大小
     */
    size?: number;
    /**
     * 是否显示阴影
     */
    showShadow?: boolean;
    /**
     * 阴影配置
     */
    shadow?: {
      blur?: number;
      spread?: number;
    };
  };

  /**
   * 标题文字配置
   */
  title?: {
    /**
     * 字体大小
     */
    fontSize?: number;
    /**
     * 字体颜色
     */
    color?: string;
    /**
     * 字体族
     */
    fontFamily?: string;
    /**
     * 字体粗细
     */
    fontWeight?: string | number;
    /**
     * 字符间距
     */
    letterSpacing?: string;
    /**
     * 行高
     */
    lineHeight?: string;
  };

  /**
   * 数值配置
   */
  value?: {
    /**
     * 字体大小
     */
    fontSize?: number;
    /**
     * 字体颜色
     */
    color?: string;
    /**
     * 字体族
     */
    fontFamily?: string;
    /**
     * 字体粗细
     */
    fontWeight?: string | number;
    /**
     * 字符间距
     */
    letterSpacing?: string;
    /**
     * 行高
     */
    lineHeight?: string;
    /**
     * 是否显示文字阴影
     */
    showTextShadow?: boolean;
    /**
     * 文字阴影配置
     */
    textShadow?: {
      blur?: number;
      spread?: number;
      color?: string;
    };
  };

  /**
   * 单位配置
   */
  unit?: {
    /**
     * 字体大小
     */
    fontSize?: number;
    /**
     * 字体颜色
     */
    color?: string;
    /**
     * 字体族
     */
    fontFamily?: string;
    /**
     * 字体粗细
     */
    fontWeight?: string | number;
    /**
     * 字符间距
     */
    letterSpacing?: string;
    /**
     * 行高
     */
    lineHeight?: string;
  };

  /**
   * 主题样式
   */
  theme?: 'light' | 'dark';

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 点击事件
   */
  onClick?: (index: number, item: StatusIndicatorItem) => void;

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const StatusIndicator = forwardRef<HTMLDivElement, StatusIndicatorProps>(function StatusIndicator({
  width = 241,
  height = 255, // 增加高度以容纳多个指示器
  backgroundImage = 'http://localhost:8085/static/images/shouye/bj71.png',
  indicators = [
    {
      indicatorColor: 'rgba(0, 139, 255, 1)',
      title: '铁路站房',
      value: '320,814',
      unit: '人'
    },
    {
      indicatorColor: 'rgba(0, 255, 241, 1)',
      title: '地铁',
      value: '320,814',
      unit: '人'
    },
    {
      indicatorColor: 'rgba(255, 165, 16, 1)',
      title: '公交',
      value: '50,433',
      unit: '人'
    },
    {
      indicatorColor: 'rgba(128, 255, 181, 1)',
      title: '出租',
      value: '29,814',
      unit: '人'
    },
    {
      indicatorColor: 'rgba(172, 149, 255, 1)',
      title: '长运',
      value: '17,295',
      unit: '人'
    }
  ],
  indicator = {
    size: 10,
    showShadow: true,
    shadow: {
      blur: 4,
      spread: 2
    }
  },
  title = {
    fontSize: 16,
    color: '#FFFFFF',
    fontFamily: 'SourceHanSansSC',
    fontWeight: 400,
    letterSpacing: '1px',
    lineHeight: '24px'
  },
  value = {
    fontSize: 16,
    color: '#FFFFFF',
    fontFamily: 'DINAlternate',
    fontWeight: 'bold',
    letterSpacing: '1px',
    lineHeight: '19px',
    showTextShadow: true,
    textShadow: {
      blur: 5,
      spread: 1,
      color: 'rgba(32,154,255,0.51)'
    }
  },
  unit = {
    fontSize: 12,
    color: '#FFFFFF',
    fontFamily: 'SourceHanSansSC',
    fontWeight: 400,
    letterSpacing: '1px',
    lineHeight: '17px'
  },
  theme = 'dark',
  style = {},
  className = '',
  onClick,
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) {

  const handleClick = (index: number, item: StatusIndicatorItem) => {
    onClick?.(index, item);
  };

  // 构建CSS类名
  const indicatorClassName = [
    'status-indicator-container',
    `theme-${theme}`,
    className
  ].filter(Boolean).join(' ');

  // 构建标题样式
  const titleStyle: React.CSSProperties = {
    fontSize: title.fontSize ? `${title.fontSize}px` : undefined,
    color: title.color,
    fontFamily: title.fontFamily,
    fontWeight: title.fontWeight,
    letterSpacing: title.letterSpacing,
    lineHeight: title.lineHeight,
    fontStyle: 'normal'
  };

  // 构建数值样式
  const valueStyle: React.CSSProperties = {
    fontSize: value.fontSize ? `${value.fontSize}px` : undefined,
    color: value.color,
    fontFamily: value.fontFamily,
    fontWeight: value.fontWeight,
    letterSpacing: value.letterSpacing,
    lineHeight: value.lineHeight,
    fontStyle: 'normal',
    ...(value.showTextShadow && value.textShadow ? {
      textShadow: `0px 0px ${value.textShadow.blur}px ${value.textShadow.color}`
    } : {})
  };

  // 构建单位样式
  const unitStyle: React.CSSProperties = {
    fontSize: unit.fontSize ? `${unit.fontSize}px` : undefined,
    color: unit.color,
    fontFamily: unit.fontFamily,
    fontWeight: unit.fontWeight,
    letterSpacing: unit.letterSpacing,
    lineHeight: unit.lineHeight,
    fontStyle: 'normal'
  };

  return createElement('div', {
    ref,
    className: indicatorClassName,
    style: { 
      width: typeof width === 'number' ? `${width}px` : width,
      height: typeof height === 'number' ? `${height}px` : height,
      ...style 
    },
    ...otherProps
  }, [
    // 渲染多个独立的指示器
    ...indicators.map((item, index) => {
      // 构建指示器样式
      const indicatorStyle: React.CSSProperties = {
        width: `${indicator.size}px`,
        height: `${indicator.size}px`,
        background: item.indicatorColor,
        ...(indicator.showShadow && indicator.shadow ? {
          boxShadow: `0px 0px ${indicator.shadow.blur}px ${indicator.shadow.spread}px ${item.indicatorColor.replace('1)', '0.43)')}`
        } : {})
      };

      return createElement('div', {
        key: `indicator-${index}`,
        className: 'status-indicator',
        style: {
          backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          marginBottom: index < indicators.length - 1 ? '16px' : '0'
        },
        onClick: () => handleClick(index, item)
      }, [
        // 指示器圆点
        createElement('div', {
          key: 'indicator',
          className: 'indicator-dot',
          style: indicatorStyle
        }),

        // 标题文字
        createElement('span', {
          key: 'title',
          className: 'indicator-title',
          style: titleStyle
        }, item.title),

        // 数值
        createElement('span', {
          key: 'value',
          className: 'indicator-value',
          style: valueStyle
        }, item.value),

        // 单位（如果有的话）
          createElement('span', {
          key: 'unit',
          className: 'indicator-unit',
          style: unitStyle
        }, 'm')
      ]);
    })
  ]);
});

StatusIndicator.displayName = 'StatusIndicator';
export default StatusIndicator; 